import { ProForm, ProFormInstance, ProFormItem } from '@/components/Pro';
import { useIntl } from '@umijs/max';
import { Col, Input, Row, Space } from 'antd';
import React, { useEffect, useRef } from 'react';

type IPops = {
  SysInfo: API.SystemInfoDTO | undefined;
  deviceType: string | undefined;
};
const SystemParams: React.FC<IPops> = (props) => {
  const { SysInfo, deviceType } = props;
  const formRef = useRef<ProFormInstance>(null);
  const intl = useIntl();
  useEffect(() => {
    formRef?.current?.setFieldsValue(SysInfo);
  }, [SysInfo]);
  return (
    <>
      <ProForm
        formRef={formRef}
        layout={'horizontal'}
        disabled={true}
        colon={false}
        submitter={false}
        labelCol={{
          span: 8,
        }}
      >
        <Row gutter={24}>
          <Col span={12}>
            {deviceType !== 'PCS' ? (
              <ProFormItem
                label={intl.formatMessage({ id: 'device.maxSystemEfficiency' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'systemEffiMax'}
              >
                <Input suffix={<span>%</span>}></Input>
              </ProFormItem>
            ) : (
              <ProFormItem
                label={intl.formatMessage({ id: 'device.maxConversionEfficiency' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'convertEffiMax'}
              >
                <Input suffix={<span>%</span>}></Input>
              </ProFormItem>
            )}
          </Col>
          <Col span={12}>
            {deviceType !== 'PCS' ? (
              <ProFormItem
                label={intl.formatMessage({ id: 'device.operatingEfficiency' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'systemEffi'}
              >
                <Input></Input>
              </ProFormItem>
            ) : (
              <ProFormItem
                label={intl.formatMessage({ id: 'device.standbyLoss' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'idleLoss'}
              >
                <Input></Input>
              </ProFormItem>
            )}
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            {deviceType !== 'PCS' ? (
              <ProFormItem
                label={intl.formatMessage({ id: 'device.cycleLife' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'cycleLife'}
              >
                <Input></Input>
              </ProFormItem>
            ) : (
              <ProFormItem
                label={intl.formatMessage({ id: 'device.noise' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'decibel'}
              >
                <Input></Input>
              </ProFormItem>
            )}
          </Col>
          <Col span={12}>
            {deviceType !== 'PCS' ? (
              <ProFormItem
                label={intl.formatMessage({ id: 'device.operatingTemperature' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'temp'}
              >
                <Input></Input>
              </ProFormItem>
            ) : (
              <ProFormItem
                label={intl.formatMessage({ id: 'device.operatingEnvironmentTemperature' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'temp'}
              >
                <Input></Input>
              </ProFormItem>
            )}
          </Col>
        </Row>
        {deviceType !== 'PCS' && (
          <Row gutter={24}>
            <Col span={12}>
              <ProFormItem
                label={intl.formatMessage({ id: 'device.relativeHumidity' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'relativeHumidity'}
              >
                <Input></Input>
              </ProFormItem>
            </Col>
            <Col span={12}>
              <ProFormItem
                label={intl.formatMessage({ id: 'device.coolingMethod' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'coolType'}
              >
                <Input></Input>
              </ProFormItem>
            </Col>
          </Row>
        )}
        <Row gutter={24}>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.protectionClass' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'protectLevel'}
            >
              <Input></Input>
            </ProFormItem>
          </Col>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.altitude' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'altitude'}
            >
              <Input></Input>
            </ProFormItem>
          </Col>
        </Row>
        {deviceType !== 'PCS' && (
          <Row gutter={24}>
            <Col span={12}>
              <ProFormItem
                label={intl.formatMessage({ id: 'device.corrosionProtection' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'corroLevel'}
              >
                <Input></Input>
              </ProFormItem>
            </Col>
            <Col span={12}>
              <ProFormItem
                label={intl.formatMessage({ id: 'device.fireProtectionSystem' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'fireSys'}
              >
                <Input></Input>
              </ProFormItem>
            </Col>
          </Row>
        )}
        <Row gutter={24}>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.weight' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'weight'}
            >
              <Input suffix={<span>KG</span>}></Input>
            </ProFormItem>
          </Col>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.dimensions' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'fireSys'}
            >
              <Space>
                <Input suffix={<span>mm</span>} value={SysInfo?.height}></Input>
                <span>*</span>
                <Input suffix={<span>mm</span>} value={SysInfo?.width}></Input>
                <span>*</span>
                <Input suffix={<span>mm</span>} value={SysInfo?.depth}></Input>
              </Space>
            </ProFormItem>
          </Col>
        </Row>
        {deviceType !== 'PCS' && (
          <Row gutter={24}>
            <Col span={12}>
              <ProFormItem
                label={intl.formatMessage({ id: 'device.communicationMethod' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'commuType'}
              >
                <Input></Input>
              </ProFormItem>
            </Col>
            <Col span={12}>
              <ProFormItem
                label={intl.formatMessage({ id: 'device.certificationStandards' })}
                rules={[
                  {
                    required: true,
                  },
                ]}
                name={'certStandards'}
              >
                <Input></Input>
              </ProFormItem>
            </Col>
          </Row>
        )}
      </ProForm>
    </>
  );
};
export default SystemParams;
